<template>
  <el-row style="text-align: center">
    <el-form ref="webForm" :model="webForm" label-width="150px"
      style="display: inline-block;margin-top: 100px; width: 600px;" :rules='webFormRules'>
      <el-form-item label="ID" hidden>
        <el-input v-model="webForm.id"></el-input>
      </el-form-item>
      <el-form-item label="网站名称" prop="title">
        <el-input v-model="webForm.title"></el-input>
      </el-form-item>
      <el-form-item label="网站作者" prop="author">
        <el-input v-model="webForm.author"></el-input>
      </el-form-item>
      <el-form-item label="网站介绍" prop="description">
        <el-input type="textarea" v-model="webForm.description"></el-input>
      </el-form-item>
      <el-form-item label="SEO关键字" prop="keywords">
        <el-input type="textarea" v-model="webForm.keywords"></el-input>
      </el-form-item>
      <el-form-item label="ICP备案号" prop="icpinfo">
        <el-input v-model="webForm.icpinfo"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认修改</el-button>
        <el-button @click="onClose('webForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>

import { getWebInfo, updateWebInfo } from '@/api/admin/webInfo/webInfo';

export default {
  data() {
    return {
      // 
      webForm: {
        id: null,
        title: null,
        author: null,
        description: null,
        keywords: null,
        icpinfo: null
      },
      // 表单验证
      webFormRules: {
        title: [{
          required: true,
          trigger: "blur",
          message: "网站名称不能为空"
        }],
        author: [{
          required: true,
          trigger: "blur",
          message: "网站作者不能为空"
        }],
        description: [{
          required: true,
          trigger: "blur",
          message: "网站介绍不能为空"
        }],
        keywords: [{
          required: true,
          trigger: "blur",
          message: "SEO关键字不能为空"
        }]
      },

    }
  },
  methods: {
    // 确认修改
    onSubmit() {
      this.$refs.webForm.validate(validate => {
        if(validate){
          updateWebInfo(this.webForm).then(response =>{
            const { data } = response
            this.$message.success("修改成功")
          }).catch(error=>{
            this.$message.error("修改失败")
          })
        }
      })
      
    },
    // 取消修改
    onClose() {
      this.initWebInfo()
      this.$message('取消修改');
    },
    //初始化内容
    initWebInfo() {
      getWebInfo().then(response => {
        console.log(response);
        const { data } = response
        this.webForm.id = data.id
        this.webForm.title = data.title
        this.webForm.author = data.author
        this.webForm.description = data.description
        this.webForm.keywords = data.keywords
        this.webForm.icpinfo = data.icpinfo
      }).catch(error => {
        this.$message.error('获取站点信息失败');
      })
    }
  },
  created() {
    this.initWebInfo()
  }
}
</script>

<style scoped></style>
